<template>
    <div>
        <div class="title">
            <img src="../../../../../../assets/app/icon/cube.png" alt="" />
            <h5>魔方</h5>
        </div>
      <operation-title
        title="按钮组"
        :icon="TitleIcon"
      />
        <div class="func">
            <p class="attr">魔方布局</p>
            <div class="decorate-cube" style="margin-left:50px;">
                <ul class="cube-row" v-for="n in densityNum" :key="'ulrow'+n">
                    <li :class="['cube-item',{'item-selecting': isSelecting(i,n),'item-selected':isSelected(i,n) }]"
                        v-for="i in densityNum" :key="'licol'+i" :data-x="i" :data-y="n"
                        :style="{'width':cubeItemWidth+'px','height':cubeItemHeight+'px'}"
                        @click="cubeItemClick($event)">
                    </li>
                </ul>

                <div class="cube-selected" v-for="(item, index) in config.pageConfig.cudeSelected" :key="index"
                    :style="{'width':getCubeSelectedWidth(item)+'px','height':getCubeSelectedHeight(item)+'px','top':getCubeSelectedTop(item)+'px','left':getCubeSelectedLeft(item)+'px'}"
                    @click="addBanner(index)"
                >
                    <p @click="cubeSelectedDel(index)" class="cube-selected-del">x</p>
                    <div :style="{
                        backgroundImage:'url('+item.imageUrl+')',
                        'width':getCubeSelectedWidth(item)+'px',
                        'height':getCubeSelectedHeight(item)+'px'
                    }" class='banner-image' v-if="item.imageUrl" > </div>
                    <div class="cube-selected-text" v-else>
                        <div>
                            <i class="el-icon-circle-plus-outline"></i>
                            {{getCubeSelectedWidth(item) }}x{{getCubeSelectedHeight(item)}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="divider"></div>
        <div class="func" v-if='config.pageConfig.cudeSelected.length>0'>
            <div class="adjust-item">
                <span>图片</span>
                <div class="img-placeholder">
                    <div class="upload-img" v-if="config.pageConfig.cudeSelected[currentIndex].imageUrl">
                        <el-image style="width: 100%; height: 100%"
                            :src="config.pageConfig.cudeSelected[currentIndex].imageUrl" fit="contain">
                        </el-image>
                        <div class="upload-img_cover">
                            <Upload :model-value="urlfileList" file-path="actapp/" :limit="999" :show-file-list="false"
                                @success="success">
                                <el-button size="small">替换</el-button>
                            </Upload>
                        </div>
                    </div>
                    <Upload v-else v-model="config.pageConfig.cudeSelected[currentIndex].imageUrl" file-path="actapp/"
                        list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </Upload>
                </div>
            </div>
            <div class="adjust-item" @click="linkDialog(config.pageConfig.cudeSelected[currentIndex],currentIndex)">
                <span>链接</span>
                <div class="link-div">
                    <el-icon>
                    <Link />
                  </el-icon>
                  <span v-if="config.pageConfig.cudeSelected[currentIndex].urlName">{{config.pageConfig.cudeSelected[currentIndex].urlName}}</span>
                  <span v-else>请选择链接</span>
                </div>

                <!-- <el-input v-model="config.pageConfig.cudeSelected[currentIndex].url" placeholder="请填写带有https/http的链接地址" maxlength="200" :show-word-limit="true" /> -->
            </div>
        </div>
        <div class="func">
            <p class="attr">颜色设置</p>
            <div class="adjust-item">
                <span>背景色</span>
                <el-color-picker v-model="config.pageConfig.color" />
                <span>{{ config.pageConfig.color }}</span>
            </div>
        </div>
        <div class="divider"></div>
        <div class="func">
            <p class="attr">边距</p>
            <div class="adjust-item">
                <span>图片边距</span>
                <el-slider v-model="config.pageConfig.marginImg" :min="0" :max="50" show-input size="small" />px
            </div>
            <div class="adjust-item">
                <span>上边距</span>
                <el-slider v-model="config.pageConfig.marginTop" :min="0" :max="50" show-input size="small" />px
            </div>
            <div class="adjust-item">
                <span>下边距</span>
                <el-slider v-model="config.pageConfig.marginBottom" :min="0" :max="50" show-input size="small" />px
            </div>
            <div class="adjust-item">
                <span>左右边距</span>
                <el-slider v-model="config.pageConfig.margin" :min="0" :max="20" show-input size="small" />px
            </div>
        </div>
        <div class="divider"></div>
        <div class="func">
            <p class="attr">圆角设置</p>
            <div class="adjust-item">
                <span>上圆角</span>
                <el-slider :min="0" :max="20" v-model="config.pageConfig.radiusTop" show-input size="small" />px
            </div>
            <div class="adjust-item">
                <span>下圆角</span>
                <el-slider :min="0" :max="20" v-model="config.pageConfig.radiusBottom" show-input size="small" />px
            </div>
        </div>
        <div class="divider"></div>

        <href-selector
          v-model:show="linkFormVisible"
          :model-value="linkObject"
          @confirm="(link) => submitUrl(link, config.pageConfig.cudeSelected[linkIndex])"
        />
    </div>
</template>

<script lang="ts">
export default {
    name: "CubeOperation",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import {useHrefSelector} from "@/views/activity/actApp/components/default/compositions/useHrefSelector";
import TitleIcon from "@/assets/app/icon/tabbar.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";
const config = defineProps({
    pageConfig: {
        type: Object,
        default: {
            color: '',
            marginTop: 0,
            marginBottom: 0,
            marginImg:0,
            margin:0,
            radiusTop: 0,
            radiusBottom: 0,
            cudeSelected: []
        },
    },
});
const cubeWidth = ref(300), //魔方宽度
    cubeHeight = ref(300), //魔方高度
    cudeSelecting = ref({
        start: null,
        end: null,
        data: []
    });
const currentIndex = ref(0);
const densityNum = computed(() => {
    return 4;
});
const cubeItemHeight = computed(() => {
    return cubeWidth.value / densityNum.value;
});
const cubeItemWidth = computed(() => {
    return cubeWidth.value / densityNum.value;
});
//魔方点击事件
const cubeItemClick = (event) => {
    const el = event.currentTarget;
    const x = el.getAttribute('data-x');
    const y = el.getAttribute('data-y');
    const domclass = el.getAttribute('class');
    console.log('[' + x + ',' + y + ',' + domclass + ']执行了点击');

    const cudeSelectingStart = cudeSelecting.value.start;
    const coord = { x: x, y: y };

    if (-1 !== domclass.indexOf('item-selected')) {
        alert("已经被占用");
        return;
    }
    if (null == cudeSelectingStart) {
        cudeSelecting.value.start = coord;
        cudeSelecting.value.data.push(coord);
    } else {
        cudeSelecting.value.end = coord;
        cudeSelecting.value.data.push(coord);

        //获取开始和结束之间所有魔方单元
        const start = cudeSelectingStart;
        const end = coord;

        const x_start = Math.min(start.x, end.x);
        const x_end = Math.max(start.x, end.x);

        const y_start = Math.min(start.y, end.y);
        const y_end = Math.max(start.y, end.y);

        const real_start = { x: Math.min(start.x, end.x), y: Math.min(start.y, end.y) };
        const real_end = { x: Math.max(start.x, end.x), y: Math.max(start.y, end.y) };

        //找到所有选择范围内的
        cudeSelecting.value.data.splice(0);
        for (let i = x_start; i <= x_end; i++) {
            for (let j = y_start; j <= y_end; j++) {
                cudeSelecting.value.data.push({ x: i, y: j });
            }
        }
        const cudeSelectingData = cudeSelecting.value.data;
        const cudeSelectedArr = [];
        for (let i = 0; i < cudeSelectingData.length; i++) {
            cudeSelectedArr.push(cudeSelectingData[i])
        }
        console.log(cudeSelectedArr);
        console.log(real_start);
        console.log(real_end);

        //加入选中的
        const cudeSelected = {
            'start': real_start,
            'end': real_end,
            'data': cudeSelectedArr
        }
        config.pageConfig.cudeSelected.push(cudeSelected);
        console.log("合并完成数据", config.pageConfig.cudeSelected)

        //清除正在选择的
        cudeSelecting.value.start = null;
        cudeSelecting.value.end = null;
        cudeSelecting.value.data.splice(0);

    }

};
//判断是否正在选择
const isSelecting = (x, y) => {
    const cudeSelectingData = cudeSelecting.value.data;
    for (let i = 0, len = cudeSelectingData.length; i < len; i++) {
        const coord = cudeSelectingData[i];
        if (parseInt(coord.x) === parseInt(x) && parseInt(coord.y) === parseInt(y)) {
            return true;
        }
    }
    return false;
};
const addBanner = (index) => {
    console.log('iiii',index)
    currentIndex.value = index;
};
//判断是否已经选择
const isSelected = (x, y) => {
    const list = config.pageConfig.cudeSelected;
    for (let i = 0; i < list.length; i++) {
        const data = list[i].data;
        for (let j = 0; j < data.length; j++) {
            const coord = data[j];
            if (parseInt(coord.x) === parseInt(x) && parseInt(coord.y) === parseInt(y)) {
                return true;
            }
        }
    }
    return false;
};
// 删除并分解当前模块
const cubeSelectedDel = (index) => {
    // ElMessageBox.confirm(`确认删除？`, "删除提示", {
    //     confirmButtonText: "确认",
    //     cancelButtonText: "取消",
    //     type: "warning",
    // }).then(async () => {

    config.pageConfig.cudeSelected.splice(index, 1);
    currentIndex.value = 0
    // });
};
//计算选中层的宽度
const getCubeSelectedWidth = (item) => {
    return (parseInt(item.end.y) - parseInt(item.start.y) + 1) * cubeItemWidth.value;
};
//计算选中层的高度
const getCubeSelectedHeight = (item) => {
    return (parseInt(item.end.x) - parseInt(item.start.x) + 1) * cubeItemHeight.value;
};
//计算选中层的右边距离
const getCubeSelectedTop = (item) => {
    return (item.start.x - 1) * cubeItemHeight.value;
};
//计算选中层的左边距离
const getCubeSelectedLeft = (item) => {
    return (item.start.y - 1) * cubeItemWidth.value;
};
let emits = defineEmits<{ (e: "changeStyle", configStyle: Object): void }>();
const urlfileList = ref([]);
const success = (value: any) => {
    config.pageConfig.cudeSelected[currentIndex.value].imageUrl = value.url;
};

const {linkFormVisible, linkIndex, linkObject, submitUrl, linkDialog} = useHrefSelector();

//
// const linkFormVisible = ref(false);
// const linkObject = ref({
//   linkUrl: '',
//   linkName: '',
//   linkType: '',
//   linkHttpUrl: ''
// });
// const submitUrl = (content: any) => {
//   config.pageConfig.cudeSelected[currentIndex.value].url = content.url;
//   config.pageConfig.cudeSelected[currentIndex.value].urlName = content.urlName;
//   config.pageConfig.cudeSelected[currentIndex.value].urlType = content.urlType;
//   linkFormVisible.value = false
// };
// const onClose = () => {
//   linkFormVisible.value = false
// };
// const linkDialog = (item: any, idx: number) => {
//   if (item.urlType == 'link') {
//     linkObject.value.linkHttpUrl = item.url;
//     linkObject.value.linkUrl = '';
//     linkObject.value.linkName = item.urlName;
//     linkObject.value.linkType = item.urlType;
//   } else {
//     linkObject.value.linkHttpUrl = '';
//     linkObject.value.linkUrl = item.url;
//     linkObject.value.linkName = item.urlName;
//     linkObject.value.linkType = item.urlType;
//   }
//   linkFormVisible.value = true;
// };
watch(config, (val) => {
    emits("changeStyle", config.pageConfig);
});
</script>

<style lang="scss" scoped>
.title {
    padding: 8px 23px;
    overflow: hidden;
    border-bottom: 5px solid #f6f7f9;
    display: flex;
    position: relative;
    height: 50px;
    box-sizing: border-box;

    img {
        position: absolute;
        left: 0;
        top: -5px;
    }

    h5 {
        font-size: 16px;
        font-weight: 700;
        position: absolute;
        left: 70px;
        top: 0;
        line-height: 50px;
    }
}

.func {
    border-bottom: 5px solid #f6f7f9;
    padding: 20px 16px;
    font-size: 16px;

    .attr {
        line-height: 1;
        color: #47565d;
        font-weight: bolder;
        margin-bottom: 20px;

        span {
            font-size: 14px;
            font-weight: 400;
            color: red;
        }
    }

    ul.common-ul {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: center;

        li {
            flex: 1;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px 0 0 4px;
            border: 2px solid #ededed;
            border-collapse: collapse;

            &.active {
                border: 2px solid #fb6638;
            }

            img {
                max-width: 100% !important;
                max-height: 100% !important;
            }
        }
    }

    h4 {
        position: relative;
        padding: 8px 16px 8px 16px;
        border-radius: 6px;
        color: red;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 10px;
        border: 1px solid #d8e8fc;
        background-color: #e5f0fe;
    }

    div.adjust-item {
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-bottom: 10px;
        .link-div {
            width: calc(100% - 80px);
            display: flex;
            align-items: center;
            background: #e8effc;
            border: 0;
            padding-left: 16px;
            cursor: pointer;
            position: relative;
            span{
                width:100%;
                text-align:left;
            }
            :deep(.el-icon) {
                margin-right: 10px;
            }

            :deep(.el-input) {
                font-size: 12px;
                height: 30px;
                width: calc(100% - 30px);
            }

            .close-btn {
                position: absolute;
                right: 5px;
            }
        }
        span {
            width: 64px;
            text-align: right;
            margin-right: 15px;
            color: #666;
        }

        :deep(.el-slider) {
            width: 240px;
            margin-right: 3px;
            margin-left: 15px;
        }

        :deep(.el-checkbox) {
            width: 100px;
            margin-right: 13px;
        }

        :deep(.el-color-picker) {
            margin-right: 13px;
        }

        :deep(.el-slider__runway.show-input) {
            margin-right: 15px;
        }

        :deep(.el-input-number) {
            width: 100px;
            background: #f4f3f7;
            border: 1px solid #f4f3f7;
        }

        .input-content {
            width: 200px;
        }

        .price-range {
            width: 150px;
        }

        .common-ul {
            width: 200px;
        }
    }

    .add-item {
        width: 100%;

        .add-item-input {
            background: #f4f3f7;
            border-radius: 4px;
            padding: 10px 20px 0px 10px;
            color: #999;
            //   margin-top: 10px;
            //   margin-bottom: 20px;
            position: relative;
            display: flex;

            p {
                width: 60px;
            }

            :deep(.el-input) {
                font-size: 12px;
                height: 30px;
                width: calc(100% - 60px);
            }

            &.extra-li {
                justify-content: center;
            }



            .sure-close {
                position: absolute;
                right: 5px;
                top: 5px;
                cursor: pointer;
            }
        }
    }
}

.tips-rank {
    position: relative;
    padding: 8px 16px 8px 16px;
    border-radius: 6px;
    color: #666;
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 10px;
    border: 1px solid #d8e8fc;
    background-color: #e5f0fe;
}

:deep(.el-radio__label) {
    font-size: 16px;
}

.img-placeholder {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
}

.upload-img {
    width: 80px;
    height: 80px;
    line-height: 80px;
    margin-right: 10px;
    border: 1px dashed #ededed;
    text-align: center;
    color: #dad9d9;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
    position: relative;

    :deep(.el-image) {
        width: 80px;
        height: 80px;
    }

    &:hover {
        .upload-img_cover {
            opacity: 1;
        }
    }

    .upload-img_cover {
        opacity: 0;
        position: absolute;
        transition: all 0.3s ease;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
}

:deep(.el-upload-list) {
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

:deep(.el-upload--picture-card) {
    width: 80px;
    height: 80px;
}

.decorate-cube {
    width: 375px;
    height: 375px;
    position: relative;
}

.decorate-cube .cube-row:last-of-type .cube-item {
    border-right: 1px solid #e5e5e5;
}

.decorate-cube .cube-selected {
    position: absolute;
    background-color: #e8f7fd;
    border: 1px solid #bdf;
    text-align: center;
    color: #7d7e80;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
}

// 添加的图片
.cube-selected .banner-image {
    width:100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.decorate-cube .cube-selected.cube-selected-click {
    background: #e0edff;
    border: 1px solid #155bd4;
    color: #155bd4;
    z-index: 2;
    cursor: auto;
}

.decorate-cube .cube-selected-text {
    font-size: 20px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    color: #88c4dc;
    font-size:12px;
}

// 删除
.cube-selected-del {
    text-align: center;
    width: 12px;
    height: 12px;
    color: #f3704b;
    line-height: 9px;
    font-size: 2px;
    border-radius: 50%;
    border: 0.5px solid #f3704b;
    position: absolute;
    top: 0px;
    right: 5px;
    display: none;
}

.cube-selected:hover .cube-selected-del {
    display: block;
}


.decorate-cube .cube-row {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

.decorate-cube .cube-item:first-child {
    border-top: 1px solid #e5e5e5;
}

.decorate-cube .cube-item {
    background: #f8f8f8;
    border-left: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

.decorate-cube .cube-item.item-selecting {
    background: #e0edff;
}
.decorate-cube .cube-item.item-selected {
    background: #e0edff;
    visibility: hidden;
}

</style>
